<template>
  <div class="item" v-if="classItem" @click.stop="toDetail">
    <div class="img-box" :style="{backgroundImage:`url(${classItem.i})`}">
      <div class="icon-text" v-if="classItem?.ts?.length">{{classItem?.ts[0]?.t}}</div>
      <div class="teacher">
        <div class="text">老师</div>
        <div class="name">{{classItem.un}}</div>
      </div>
    </div>
    <div class="text my-text">{{classItem.t}}</div>
    <div class="study">{{classItem.sales}}</div>
  </div>
</template>

<script>
export default {
  props:['classItem'],
  methods:{
    toDetail(){
      this.$router.push({
        name:"classroomdetail",
        params:{
          classid:this.classItem.id
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.item {
  width: 1.65rem;
  margin-bottom: 0.2rem;
  .img-box {
    position: relative;
    width: 100%;
    height: 2.45rem;
    border-radius: 0.12rem;
    overflow: hidden;
    .icon-text{
      position: absolute;
      left: 0.08rem;
      top: 0.08rem;
      font-size: 0.13rem;
      color: var(--text-black);
      background-color: var(--bgc-yellow);
      padding: 0.04rem;
      border-radius: 0.02rem;
    }
    .teacher{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0.05rem;
      margin: 0 auto;
      font-size: 0.13rem;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      >div{
        margin: 0;
      }
      .text{
        padding: 0.02rem;
        border-radius: 0.02rem;
        color: var(--bgc-black);
        background-color: var(--bgc-white);
      }
      .name{
        color: var(--text-white);
      }
    }
  }
  .text{
    font-size: 0.15rem;
    line-height: 0.18rem;
    color: var(--text-black);
    margin: 0.1rem 0;
    -webkit-line-clamp: 2;
  }
  .study{
    font-size: 0.13rem;
    line-height: 0.13rem;
    color: var(--text-gray2);
  }
}
</style>